<template>
  <div class="qckc">
    <div class="tx-heade">
      <el-form
        ref="form"
        :model="form"
        label-width="110px"
        style="margin: 10px 0 0 0; display: flex"
      >
        <el-form-item label="选择公司" style="width: 280px">
          <el-select v-model="form.region" placeholder="分公司1">
            <el-option label="分公司1" value="shanghai"></el-option>
            <el-option label="分公司2" value="beijing"></el-option>
            <el-option label="分公司3" value="beijing2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="选择网点" style="width: 280px">
          <el-select v-model="form.region" placeholder="网点1">
            <el-option label="网点1" value="shanghai"></el-option>
            <el-option label="网点2" value="beijing"></el-option>
            <el-option label="网点3" value="beijing2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <div class="ddgl">
      <el-tabs v-model="activeName3">
        <el-tab-pane label="账号管理" name="first3">
          <div class="tab-top">
            <div class="tab-left">
              <el-input
                placeholder="请输入订单号/手机号/姓名/网点名称"
                prefix-icon="el-icon-search"
                style="margin: 15px 0px 0 0px; width: 300px; height: 40px"
                v-model="input21"
              >
              </el-input>
              <el-form
                ref="form"
                :model="form"
                label-width="110px"
                style="margin: 10px 30px 0 0; display: flex"
              >
                <el-form-item label="订单状态：" style="width: 280px">
                  <el-select v-model="form.region" placeholder="全部">
                    <el-option label="全部" value="shanghai"></el-option>
                    <el-option label="待付款" value="beijing"></el-option>
                    <el-option label="已付款" value="beijing2"></el-option>
                    <el-option label="待派送" value="shanghai"></el-option>
                    <el-option label="派送中" value="beijing"></el-option>
                    <el-option label="已完成" value="beijing2"></el-option>
                    <el-option label="已取消" value="beijing2"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <el-button
                type="primary"
                style="width: 120px; height: 40px; margin-top: 10px"
                >搜索</el-button
              >
            </div>
            <div class="table-right">
              <el-button
                type="primary"
                style="width: 120px; height: 40px; margin-top: 10px"
                >新建</el-button
              >
              <el-button
                type="primary"
                style="width: 120px; height: 40px; margin-top: 10px"
                >批量操作</el-button
              >
            </div>
          </div>

          <el-table
            :data="tableData2"
            style="width: 100%"
            :default-sort="{ prop: 'date', order: 'descending' }"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="xuhao" label="序号"> </el-table-column>
            <el-table-column label="账号" prop="zhanghao"></el-table-column>
            <el-table-column prop="danjia" label="姓名"> </el-table-column>
            <el-table-column prop="date" label="所属网点" width="220">
            </el-table-column>
            <el-table-column prop="address" label="邮箱" width="180">
            </el-table-column>
            <el-table-column prop="name" label="绑定微信" width="180">
            </el-table-column>
            <el-table-column prop="zhuangtai" label="状态" width="180">
            </el-table-column>
            <el-table-column label="操作" width="160">
              <template>
                <el-button @click="handleClick()" type="text" size="small"
                  >编辑
                </el-button>

                <el-button type="text" size="small" style="margin: 0 0 0 12px"
                  >启用</el-button
                >

                <el-button type="text" size="small">更多</el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="fenye">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="工作统计" name="second3">
          <div class="content2">
            <h3 style="border-bottom: 1px solid #bbb">配送工作量统计</h3>
            <div class="con2">
              <div class="con2-left">
                  <el-form
                    ref="form"
                    :model="form"
                    label-width="110px"
                  >
                    <el-form-item label="选择日期：" style="width: 80px">
                      <el-date-picker
                        v-model="value6"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        style="width: 300px"
                      >
                      </el-date-picker>
                    </el-form-item>
                  </el-form>

                <div class="peisong">
                  <div class="gongzuo" >
                    <div style="height: 60px; margin: 0 0 20px 0">
                      <p style="line-height: 30px; margin: 0">累计订单数</p>
                      <h3 style="line-height: 30px; margin: 0">23,000</h3>
                    </div>
                    <div>
                      <p style="line-height: 30px; margin: 0">累计销售额</p>
                      <h3 style="line-height: 30px; margin: 0">4,235.000</h3>
                    </div>
                  </div>
                  <div class="zongliang">
                    <p style="margin:6px 0 0 0">排名前三</p>
                    <div class="paiming">
                      <p class="p6">1</p>
                      <p class="p5">张三</p>
                      <p class="p5">300</p>
                    </div>
                    <div class="paiming">
                      <p class="p6">2</p>
                      <p class="p5">张三</p>
                      <p class="p5">300</p>
                    </div>
                    <div class="paiming">
                      <p class="p7">3</p>
                      <p class="p5">张三</p>
                      <p class="p5">300</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="con2-right">
                <el-table
            :data="tableData2"
            style="width: 100%"
            :default-sort="{ prop: 'date', order: 'descending' }"
          >

            <el-table-column prop="xuhao" label="序号"> </el-table-column>
            <el-table-column prop="danjia" label="姓名"> </el-table-column>
             <el-table-column prop="address" label="手机号" width="180">
            </el-table-column>
            <el-table-column prop="date" label="所属网点" width="220">
            </el-table-column>
           
            <el-table-column prop="name" label="工作量" width="180">
            </el-table-column>

          </el-table>
              </div>
            </div>
          </div>
          <div class="fenye">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      activeName2: "day",
      activeName3: "first3",
      input21: "",
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      tableData2: [
        {
          xuhao: "1",
          date: "XXXX网点1",
          name: "300",
          address: "1358130xxxx",
          danjia: "郭富城",
          zhuangtai: "启用",
          zhanghao: "13581308299",
        },
        {
          xuhao: "2",
          date: "XXXX网点1",
          name: "200",
          address: "1358130xxxx",
          danjia: "禁用",
          zhuangtai: "已上架",
          zhanghao: "13581308299",
        },
        {
          xuhao: "3",
          date: "XXXX网点1",
          name: "300",
          address: "1358130xxxx",
          danjia: "禁用",
          zhuangtai: "已上架",
          zhanghao: "13581308299",
        },
      ],
    };
  },

  methods: {
    handleClick() {
      this.$router.push({ path: "/dingdan/detail" });
    },
  },
};
</script>

<style lang="scss" scoped>
.qckc {
  width: 98%;
  overflow: hidden;
  margin: 1%;

  .tx-heade {
    width: 100%;
    height: 60px;
    overflow: hidden;
    background-color: #fff;
    margin-bottom: 20px;
  }

  .ddgl {
    padding: 1% 2%;
    overflow: hidden;
    background-color: #fff;
    .tab-top {
      display: flex;
      .tab-left {
        display: flex;
        width: 70%;
      }
      .tab-right {
        display: flex;
      }
    }

    .content2 {
      width: 100%;
      overflow: hidden;
      .con2 {
        display: flex;
        .con2-left {
          width: 40%;
          .peisong {
            margin: 0 30px 0 0;
            display: flex;
             .gongzuo {
               margin: 0 80px 0 0;
          }
          .zongliang{
            height: 120px;
            .paiming{
              width: 140px;
              display: flex;
              justify-content: space-between;
              margin: 0;
              .p5,.p6,.p7{
                margin: 10px 0;
                padding: 2px 8px;
              }
              .p6{
                background-color: #bf0e23;
                color: #fff;
              }
              .p7{
                background-color: #ec808d;
                color: #fff;
              }
            }
          }
          }
         
        }
        .con-right {
          width: 56%;

        }
      }
    }

    .fenye {
      width: 100%;
      padding: 80px 0 30px 0;
      .el-pagination,
      .is-background {
        float: right;
        margin-right: 10%;
      }
    }
  }
}
</style>